<template>
  <div class="image-library">
    <div class="image-library-2" style="width: 180px;;border-right: solid 1px var(--el-border-color);">
      <el-tree
          :data="categories"
          node-key="id"
          :props="defaultProps"
          @node-click="handleNodeClick"
      >
        <template #default="{ node, data }">
          <span>{{ data.name }}</span>
          <span style="float: right; margin-left: 25px">
                <el-dropdown @command="(command) => handleCommand(data, command)">
                  <span class="el-dropdown-link"><b>...</b></span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item command="add">添加分类</el-dropdown-item>
                      <el-dropdown-item command="edit" v-if="data.id > 0">编辑分类</el-dropdown-item>
                      <el-dropdown-item command="delete" v-if="data.id > 0">删除分类</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </span>
        </template>
      </el-tree>
    </div>
    <div>
        <div class="top-buttons" style="margin-left: 15px;">
          <el-button @click="useSelectedImages" type="primary">使用选中的文件</el-button>
          <el-button @click="openUploadDialog" type="primary">上传文件</el-button>
          <el-button @click="confirmDeleteImages">删除文件</el-button>
          <el-input
              v-model="keyword"
              class="keyword"
              placeholder="请输入文件名"
              style="margin-left: 10px;"
          />
          <el-button
              type="primary"
              icon="search"
              @click="getSearchData"
          >查询</el-button>
        </div>
      <div class="flex flex-wrap gap-4">
        <div v-for="image in images" :key="image.ID" class="block">
          <el-image v-if="image.tag !== 'mp4'" :src="image.url" @click="toggleImageSelection(image)" :class="{ selected: isSelected(image) }" style="width: 96px;height: 96px;"></el-image>
          <video v-else controls style="width: 96%; height: 96px;" @click="toggleImageSelection(image)" :class="{ selected: isSelected(image) }">
            <source :src="image.url" />
          </video>
          <div class="overflow-hidden text-nowrap overflow-ellipsis text-center w-full">{{image.name}}</div>
        </div>
      </div>

      <el-pagination @current-change="pageChange" background layout="prev, pager, next" :page-size="18" :total="totalPage" style="float: right"/>
    </div>
  </div>
  <!-- 添加分类弹窗 -->
  <el-dialog v-model="isAddCategoryDialogVisible" @close="closeAddCategoryDialog" title="添加分类">
    <el-form>
      <el-form-item label="上级分类">
        <el-tree-select
            v-model="cat_id"
            :data="categories"
            check-strictly
            :props="defaultProps"
            :render-after-expand="false"
            style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="分类名称">
        <el-input v-model="cat_name" placeholder="分类名称"></el-input>
      </el-form-item>

    </el-form>
    <template #footer>
      <el-button @click="closeAddCategoryDialog">取消</el-button>
      <el-button type="primary" @click="confirmAddCategory">确定</el-button>
    </template>
  </el-dialog>
  <!-- 删除确认弹窗 -->
  <el-dialog v-model="isDeleteImagesDialogVisible" @close="closeDeleteImagesDialog" title="删除文件" width="350">
    <span>确定要删除选中的文件吗？</span>
    <template #footer>
      <el-button @click="closeDeleteImagesDialog">取消</el-button>
      <el-button type="danger" @click="deleteImages">确定</el-button>
    </template>
  </el-dialog>
  <!-- 上传图片弹窗 -->
  <el-dialog v-model="isUploadDialogVisible" title="上传文件">
    <el-form>
      <el-form-item label="上传分类">
        <el-tree-select
            v-model="selectedCategory"
            check-strictly
            :data="categories"
            node-key="id"
            :props="defaultProps"
            placeholder="请选择分类"
        >
          <template #default="{ node, data }">
            <span>{{ data.name }}</span>
          </template>
        </el-tree-select>
      </el-form-item>
      <el-form-item label="选择文件">
        <el-upload
            ref="uploadRef"
            action=""
            multiple
            :on-change="handleChange"
            :on-remove="handleRemove"
            :file-list="fileList"
            list-type="picture-card"
            :auto-upload="false">
          <el-icon><Plus /></el-icon>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="closeUploadDialog">取消</el-button>
      <el-button type="primary" @click="submitUpload">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, defineEmits, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { Plus } from '@element-plus/icons-vue'
import { getCategoryListApi,getFileListApi,addCategoryApi,deleteCategoryApi,deleteFilesApi,uploadHandlerApi } from '@/plugin/picturelibrary/api/api.js'
import {getUrl, isVideoExt} from "@/utils/image";

const emit = defineEmits(['select']);

const cat_id = ref(0)
const selectedImage = ref(null);
const selectedImages = ref([]);
const images = ref([])
const categories = ref([])

const isAddCategoryDialogVisible = ref(false)
const cat_name = ref('')
const isDeleteImagesDialogVisible = ref(false)
const isUploadDialogVisible = ref(false)
const selectedCategory = ref(null)
const fileList = ref([])
const selectedParentCategory = ref(null)
const totalPage = ref(0)
const editId = ref(0)
const searchCatId = ref(0)
const page = ref(1)
const pageSize = ref(18)
const keyword = ref('')
const props = defineProps({
  multiple: Boolean, // 接收父组件传递的multiple参数
});

const defaultProps = {
  children: 'children',
  label: 'name',
  value: 'id'
}

const pageChange = (index) => {
  page.value = index
  getPicList()
}

const getSearchData = () => {
  getPicList()
}

const getPicList = async () => {
  try {
    const response = await getFileListApi({page:page.value,limit:pageSize.value,cid:searchCatId.value,keyword:keyword.value})
    if(response.code === 0){
      if(response.data.list){
        images.value = response.data.list
        totalPage.value = response.data.total
      }
    }
    else{
      ElMessage.error(response.msg);
    }

  } catch (error) {
     ElMessage.error('请求失败');
  }
}

const fetchCategories = async (name = '顶级分类') => {
  let data = {
    name: name,
    id: 0,
    pid: 0,
    children:[]
  }

  try {
    const response = await getCategoryListApi({})
    if(response.code === 0){
      if(response.data.list){
        response.data.list.unshift(data)
        categories.value = response.data.list
      }
      else{
        categories.value = [data]
      }
    }
    else{
      ElMessage.error('分类数据获取失败');
    }

  } catch (error) {
    console.error('Error fetching categories:', error)
  }
}

onMounted(() => {
  fetchCategories()
  getPicList()
})

const toggleImageSelection = (image) => {
  const index = selectedImages.value.findIndex(img => img.ID === image.ID);
  if (index > -1) {
    selectedImages.value.splice(index, 1);
  } else {
    selectedImages.value.push(image);
  }
}

const isSelected = (image) => {
  return selectedImages.value.some(img => img.ID === image.ID);
}

const useSelectedImages = () => {
  if (selectedImages.value.length > 0) {
    if(!props.multiple && selectedImages.value.length > 1){
      ElMessage.error('只能选择一个文件');
      return
    }
    const urls = selectedImages.value.map(img => img);
    emit('select', urls);
    selectedImages.value = []

  } else {
    ElMessage.error('请选择一个或多个文件');
  }
}

const openUploadDialog = () => {
  isUploadDialogVisible.value = true
}

const closeUploadDialog = () => {
  isUploadDialogVisible.value = false
  selectedCategory.value = null
  fileList.value = []
}
const fileTypeList = ref(['image/gif', 'image/jpeg', 'image/png', 'video/mp4', 'video/x-msvideo', 'video/x-ms-wmv','video/mpeg','video/x-ms-asf'])
const submitUpload = async () => {
  if (selectedCategory.value !== null && fileList.value.length > 0) {
    try {
      const formData = new FormData();
      fileList.value.forEach(file => {
        formData.append('files', file.raw);
      });
      formData.append('cat_id', selectedCategory.value);

      try {
        const response = await uploadHandlerApi(formData);
        if(response.code === 0){
          ElMessage.success('文件上传成功');
          closeUploadDialog();
          selectedCategory.value = null
        }
        else{
          ElMessage.error('文件上传失败');
        }
      } catch (error) {
        ElMessage.error('文件上传失败');
      }
    } catch (error) {
      ElMessage.error('上传失败，请重试');
    }
  } else {
    ElMessage.error('请选择分类和文件');
  }
}

const deleteImages = async () => {
  if (selectedImages.value.length > 0) {
    const response = await deleteFilesApi(selectedImages.value)
    if(response.code === 0){
      ElMessage.success('删除成功');
      selectedImages.value = [];
      isDeleteImagesDialogVisible.value = false;
      getPicList()
    }
    else{
      ElMessage.error('文件删除失败');
      isDeleteImagesDialogVisible.value = false;
    }

  } else {
    ElMessage.error('请选择一张或多张图片');
  }
}

const confirmDeleteImages = () => {
  if (selectedImages.value.length > 0) {
    isDeleteImagesDialogVisible.value = true;
  } else {
    ElMessage.error('请选择一个或多个文件');
  }
}

const addCategory = (cat) => {
  isAddCategoryDialogVisible.value = true;
  cat_id.value = cat.id
}

const editCategory = (category) => {
  cat_id.value = category.pid
  cat_name.value = category.name
  editId.value = category.id
  isAddCategoryDialogVisible.value = true;

}

const deleteCategory = async (category) => {
  try {
    const response = await deleteCategoryApi({cat_id:category.id})
    if(response.code === 0){
      ElMessage.success('删除成功');
      fetchCategories()
      getPicList()
    }
    else{
      ElMessage.error(response.data.msg);
    }
  } catch (error) {
    ElMessage.error('删除分类失败，请重试');
  }
}

const closeAddCategoryDialog = () => {
  isAddCategoryDialogVisible.value = false
  cat_name.value = ''
  selectedParentCategory.value = null
}

const confirmAddCategory = async () => {
  if (cat_name.value.trim()) {
    const newCategory = {
      name: cat_name.value.trim(),
      pid: cat_id.value,
      id:editId.value
    };
    try {
      const response = await addCategoryApi(newCategory);
      if(response.code === 0){
        ElMessage.success('添加成功');
        fetchCategories()
        getPicList()
        closeAddCategoryDialog();
      }
      else{
        ElMessage.error(response.msg);
      }
    } catch (error) {
      ElMessage.error('分类添加失败，请重试');
    }
  } else {
    ElMessage.error('分类名称不能为空');
  }
}

const handleNodeClick = (node) => {
  searchCatId.value = node.id
  getPicList()
}
const handleCommand = (category,command) => {
  if (command === 'add') {
    addCategory(category);
  } else if (command === 'edit') {
    editCategory(category);
  } else if (command === 'delete') {
    deleteCategory(category);
  }
}

const handleChange = (uploadFile, uploadFiles) => {
  uploadFiles.forEach(file => {
    if(fileTypeList.value.includes(file.raw.type) === false){
      ElMessage.error('图片或视频格式有误');
      fileList.value = []
    }
    else{
      fileList.value = uploadFiles;
      console.log('fileList:', fileList.value.length);
    }
  });
}


const handleRemove = (file, fileList) => {
  // fileList.value = fileList;
  console.log('Remove:', file, fileList);
}

const closeDeleteImagesDialog = () => {
  isDeleteImagesDialogVisible.value = false
}

const dummyRequest = ({ onSuccess }) => {
  setTimeout(() => {
    onSuccess('ok');
  }, 1000);
}

const uploadRef = ref(null)
</script>

<style scoped>
.image-library {
  display: flex;
}
.image-library-2 {
  flex: 0 0 auto;
}

.el-dropdown-link {
  cursor: pointer;
}
.top-buttons {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 20px;
}
.selected {
  border: 3px solid #409eff;
}

.block {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  vertical-align: top;
  padding: 2px;
  width: 100px;
  height: 100px;
  margin-left: 15px;
}
</style>